<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :is-back="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="10"
        :searchSize="10"
        :otherSize="-1"
        justify="space-between"
        :searchStyle="{height: '125px', backgroundColor: '#fff'}"
        :logoStyle="{fontSize: '100px'}"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <div style="display: flex; justify-content: center;">
        <div style="margin-right: 20px;">
          <n-tool-side :selected="selected"></n-tool-side>
        </div>
        <div style="width: 1000px; margin-top: 20px;">
          <slot name="default"></slot>
        </div>
      </div>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import NHeaderVue from "@/components/NHeader.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import SearchBarVue from "@/components/userInfo/SearchBar.vue";
import NToolSideVue from "@/components/NToolSide.vue";

export default {
  props: {
    selected: Number,
  },
  components: {
    NHeader: NHeaderVue,
    SearchBar: SearchBarVue,
    NSearchBar: NSearchBarVue,
    NToolSide: NToolSideVue,
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}

.main {
  background-color: #f0f3ef;
  overflow: hidden;
  padding: 0;
}
</style>